import React, { memo, useEffect } from "react";
import { MovieDetailStyle } from "./index.style";
import { PageTitle } from "../../../assets/global-style";
import Scroll from "../../../baseUI/scroll/index";
import { connect } from "react-redux";

import * as actionTypes from "../../Movie/store/actionCreators";

const MovieDetail = (props) => {
  // const {moviestate} =props
  // const {rotationImg}= moviestate;
  const { state } = props.location;

  
  const goBack = () => {
    history.go(-1)
  }

  return (
    <MovieDetailStyle>
    <div className="back" onClick={goBack}>
      <svg t="1641971935225" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2478" width="200" height="200"><path d="M738.145103 170.248828 663.234207 95.337931 313.114483 445.457655 312.937931 445.298759 238.768552 519.450483 238.945103 519.627034 238.768552 519.785931 313.679448 594.696828 313.838345 594.537931 658.996966 939.696552 733.166345 865.509517 388.007724 520.368552Z" p-id="2479" fill="#6F6F6F"></path></svg>
    </div>
    <PageTitle>&lt;&lt;{state.name}&gt;&gt;</PageTitle>
    <Scroll direction={"vertical"} refresh={false}>
      <div className="content" >
      <video
        preload="true"
        controls
        loop
        autoPlay
        poster={state.detailData.poster}
      >
        <source src={state.detailData.source} type="video/webm" />
        Sorry, your browser doesn't support embedded videos.
      </video>
      <div className="brief">
        <div className="brief_title">剧情简介</div>
        <div className="brief_text">{state.detailData.brief}</div>
      </div>
      <div className="comment">
        <div className="comment_title">
          &nbsp;观众热评({state.detailData.comment_number})
          <button>写短评&nbsp;&nbsp;</button>
        </div>
        <div className="comment_content">
          <div className="comment_author">
            <img src="" alt="" />
            &nbsp;用户&nbsp;{state.detailData.author_name}
          </div>
          <div className="comment_text">
            &nbsp;&nbsp;&nbsp;{state.detailData.comment_text}
          </div>
          <div className="comment_date">
            <span className="reply_number">
              &nbsp;{state.detailData.reply_number}&nbsp;回复&nbsp;
            </span>
            {state.detailData.reply_date}
          </div>
        </div>
      </div>
      </div>
    </Scroll>
  </MovieDetailStyle>
  );
};

export default MovieDetail;
